<template>
	<div class="repertory-records-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">{{ $route.meta.title }}</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" label-width="110px" class="demo-ruleForm">
					<div class="content_info">
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('text.modificationTime')">
									<el-input readonly :value="info.createTime" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.brandName')">
									<el-input readonly :value="info.brandName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.seriesName')">
									<el-input readonly :value="info.seriesName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.carYear')">
									<el-input readonly :value="info.carYear" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.modelName')">
									<el-input readonly :value="info.modelName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.outsideColours')">
									<el-input readonly :value="info.outsideColour" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.insideColours')">
									<el-input readonly :value="info.insideColour" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.vinNumber')">
									<el-input type="text" readonly :value="info.vinNumber" maxlength="20" show-word-limit
										@keyup.native="btKeyUp($event, 'vinNumber')" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.certificateNumber')">
									<el-input v-if="propUpType === 'detail'" readonly :value="info.certificateNumber" />
									<el-input v-else type="text" v-model="info.certificateNumber" :placeholder="$t('placeholderTip.enter')"
										maxlength="17" show-word-limit @keyup.native="btKeyUp($event, 'certificateNumber')" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.engineNumber')">
									<el-input v-if="propUpType === 'detail'" readonly :value="info.engineNumber" />
									<el-input v-else type="text" v-model="info.engineNumber" :placeholder="$t('placeholderTip.enter')"
										maxlength="11" show-word-limit @keyup.native="btKeyUp($event, 'engineNumber')" />
								</el-form-item>
							</el-col>
						</el-row>
						<template v-for="(item, index) in info.retrofitList">
							<el-row :gutter="24" v-if="isRetrofitting === 1 && info.retrofitList.length > 0" :key="index">
								<el-col :span="8">
									<el-form-item :label="index === 0 ? $t('publicFormLabel.optionalPackage') : ' '">
										<div style=" display: flex;align-items: center;">
											<el-input readonly :value="item.name" />
											<el-tooltip :content="item.describe" placement="top" v-if="item.describe">
												<i class="el-icon-info" style="color: #acadb1;"></i>
											</el-tooltip>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.oPPurchasePrice')">
										<el-input readonly type="number" min="0" v-model="item.cost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.nakedCarPurchasePrice')">
									<el-input readonly :value="info.costPrice">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8" v-if="isRetrofitting === 1 && info.retrofitList">
								<el-form-item :label="$t('publicFormLabel.oPTotalPrice')">
									<el-input readonly :value="info.retrofittingCost">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.bulkPurchasePrice')">
									<el-input readonly :value="info.totalCost">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="line"></div>
						<div style="margin-bottom:20px">{{ $t('text.beforeModification') }}</div>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.brandName')">
									<el-input readonly :value="info.orgBrandName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.seriesName')">
									<el-input readonly :value="info.orgSeriesName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.carYear')">
									<el-input readonly :value="info.orgCarYear" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.modelName')">
									<el-input readonly :value="info.orgModelName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.outsideColours')">
									<el-input readonly :value="info.orgOutsideColour" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.insideColours')">
									<el-input readonly :value="info.orgInsideColour" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.vinNumber')">
									<el-input type="text" readonly :value="info.orgVinNumber" maxlength="20" show-word-limit />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.certificateNumber')">
									<el-input v-if="propUpType === 'detail'" readonly :value="info.orgCertificateNumber" />
									<el-input v-else type="text" v-model="info.certificateNumber" :placeholder="$t('placeholderTip.enter')"
										maxlength="17" show-word-limit @keyup.native="btKeyUp($event, 'certificateNumber')" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.engineNumber')">
									<el-input v-if="propUpType === 'detail'" readonly :value="info.orgEngineNumber" />
									<el-input v-else type="text" v-model="info.engineNumber" :placeholder="$t('placeholderTip.enter')"
										maxlength="11" show-word-limit @keyup.native="btKeyUp($event, 'engineNumber')" />
								</el-form-item>
							</el-col>
						</el-row>
						<template v-for="(item, index) in info.orgRetrofitList">
							<el-row :gutter="24" v-if="isRetrofitting === 1 && info.orgRetrofitList.length > 0" :key="index">
								<el-col :span="8">
									<el-form-item :label="index === 0 ? $t('publicFormLabel.optionalPackage') : ' '">
										<div style="display: flex;align-items: center;">
											<el-input readonly :value="item.name" />
											<el-tooltip :content="item.describe" placement="top" v-if="item.describe">
												<i class="el-icon-info" style="color: #acadb1;"></i>
											</el-tooltip>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.oPPurchasePrice')">
										<el-input readonly type="number" min="0" v-model="item.cost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.nakedCarPurchasePrice')">
									<el-input readonly :value="info.orgCostPrice">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8" v-if="isRetrofitting === 1 && info.orgRetrofitList">
								<el-form-item :label="$t('publicFormLabel.oPTotalPrice')">
									<el-input readonly :value="info.orgRetrofitCost">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('publicFormLabel.bulkPurchasePrice')">
									<el-input readonly :value="info.orgTotalCost">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="line"></div>
						<!-- 审批流程  propup_type :2  detail   -->
						<approvalProcessDetails :type=17 :propup_type=2 :list='approveList'></approvalProcessDetails>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ $t('el.popconfirm.close') }}</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
// import { getStockUpdateInfo } from '@/api/commercial-vehicle-manager'
import approvalProcessDetails from '@/components/approval-process-details'
export default {
	name: 'repertoryManagerInfo',
	components: {
		approvalProcessDetails
	},
	data() {
		return {
			info: {},
			isRetrofitting: this.$store.getters.isRetrofitting, //是否开启选装 1开启 2关闭
			approveList: [],
			propUpType: '' // 'add' edit detail
		}
	},
	watch: {},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		this.getInfo(this.$route.query.id)
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		// 详情
		getInfo(id) {
			getStockUpdateInfo(id).then(res => {
				if (res.code === 200) {
					if (res.data.recordInfo.processInfo) {
						this.approveList = res.data.recordInfo.processInfo
					}
					this.info = res.data
				}
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.repertory-records-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 40px);
					overflow: hidden;
					overflow-y: auto;
				}

				.line {
					height: 1px;
					margin-bottom: 25px;
					background: #ebeef5;
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
